<template>
    <div class="top">
        <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" :ellipsis="false">
            <div class="top-title">
                <span style="font-size: 40px;color: #22a2c3;">大</span>
                <span style="color: #22a2c3;">学生</span>
                <span style="color: #533c1b;">创新创业</span>
                <span style="color: #fc8c23;">项目申报系统</span>
            </div>
            <el-menu-item index="1" style="margin-left: 170px;">首页</el-menu-item>
            <el-menu-item index="2">项目申报</el-menu-item>
            <el-menu-item index="3">团队管理</el-menu-item>
            <el-menu-item index="4">资金申请与管理</el-menu-item>
            <el-menu-item index="5">评审与审批</el-menu-item>
            <el-menu-item index="6">帮助与反馈</el-menu-item>
            <el-menu-item index="7">系统设置</el-menu-item>
            <div class="top-user"><el-dropdown v-if="userName == null">
                    <span>登录</span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="$router.push('/login')">管理员登录</el-dropdown-item>
                            <el-dropdown-item @click="$router.push('/userLogin')">用户登录</el-dropdown-item>
                            <el-dropdown-item @click="$router.push('/adminRegister')">管理员注册</el-dropdown-item>
                            <el-dropdown-item @click="$router.push('/userRegister')">用户注册</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            <el-dropdown v-else>
                    <span>
                        欢迎您{{ userName }}！
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>个人主页</el-dropdown-item>
                            <el-dropdown-item>修改密码</el-dropdown-item>
                            <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown></div>
        </el-menu>
    </div>
    <div class="center">
    </div>
    <div class="bottom">
    </div>
</template>

<script setup lang="ts">
import { onMounted,ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();


const userName = ref<string | null>(null);
onMounted(() => {
    userName.value = sessionStorage.getItem('userName');
})

// const activeIndex = ref('')
// const handleSelect = (key: string, keyPath: string) => {
//     console.log(key, keyPath)
//     // router.push(keyPath)
// }

// 退出
const exit = () => {
    sessionStorage.removeItem('userName');
    router.push('/userLogin');
}
</script>

<style scoped>
.top-title {
    font-size: 20px;
    font-family: '方正舒体';
}
.el-dropdown {
    margin: 20px 20px 0 450px;
    font-size: 20px;
    font-family: '方正舒体';
}
.el-menu-item {
    font-size: 20px;
    font-family: '方正舒体';
}

.el-menu-demo {
    width: 100%;
    height: 80px;
    display: flex;
    padding: 15px 20px 0 20px;
    background-image: linear-gradient(to right, #a7a8bd, #57c3c2);

}

.el-menu--horizontal {
    --el-menu-horizontal-height: 100px;
}


.center {
    width: calc(100% - 400px);
    height: calc(100% - 180px);
    margin: 0 auto;
    background-color: #f5f5f5;
}

.bottom {
    width: 100%;
    height: 100px;
    background-color: #f9f1db;
}
</style>
<style lang="scss">
.el-sub-menu__title {
    font-size: 20px;
    font-family: '方正舒体';
}
</style>